<div class="breadcrumbs breadcrumbs-fixed ace-save-state">
    <ul class="breadcrumb">
        <li>
            <i class="ace-icon fa fa-user-circle home-icon"></i>
            <a href="#">管理员管理</a>
        </li>
        <li class="active">角色列表</li>
    </ul>
</div>

<div class="page-content">
    <div class="row">
        <div class="col-xs-12">
            <h4 class="header smaller lighter blue">角色列表</h4>
            <div class="row">
                <div class="col-xs-12">
                    <a id="addRole" href="#role-modal" data-toggle="modal" class="btn btn-sm btn-success">
                        <i class="fa fa-plus"></i> 添加角色
                    </a>
                </div>
            </div>
            <div class="space-6"></div>
            <div class="dataTables_wrapper form-inline no-footer">
                <table id="role-table" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>角色名</th>
                        <th>权限</th>
                        <th>添加时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

    <div id="role-modal" class="bootbox modal fade in" tabindex="-1" role="dialog" aria-hidden="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" class="bootbox-close-button close close-button">&times;
                    </button>
                    <h5 class="modal-title">角色信息</h5>
                </div>
                <div class="modal-body">
                    <form id="role-form" class="form-horizontal" role="form">
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="roleName"> 角色名称： </label>
                            <div class="col-sm-9">
                                <div class="clearfix">
                                    <input type="text" id="id" name="id" class="hidden">
                                    <input type="text" id="roleName" name="roleName" class="input-sm col-xs-9">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label no-padding-right" for="roleName"> 角色权限： </label>
                            <div class="col-sm-9">
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="1" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-user-circle-o"></i> 管理员管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="2" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-users"></i> 用户管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="3" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-users"></i> 商铺管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="4" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-commenting-o"></i> 商品管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="5" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-cubes"></i> 评论投诉</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="6" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-shopping-cart"></i> 订单管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="7" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-money"></i> 财务管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="8" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-user"></i> 客服管理</span>
                                    </label>
                                </div>
                                <div class="checkbox">
                                    <label>
                                        <input name="permissionId" value="9" type="checkbox" class="ace">
                                        <span class="lbl"> <i class="fa fa-pie-chart"></i> 统计管理</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-sm btn-default close-button"><i
                            class="fa fa-undo"></i> 取消
                    </button>
                    <button id="saveRole" type="button" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> 保存
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    var role_table, role_validator;
    $(function () {
        role_table = $('#role-table').DataTable({
            language: {url: 'ace/json/dataTable_CN.json'},
            autoWidth: false,
            ordering: false,
            searching: false,
            serverSide: true,
            processing: true,
            deferRender: true,
            responsive: true,
            ajax: {
                url: 'management/getRolePage'
            },
            columns: [
                {
                    data: 'roleName',
                    defaultContent: ''
                },{
                    data: 'permissions'
                }, {
                    data: 'createTime',
                    defaultContent: ''
                }, {
                    data: function (row) {
                        return '<a id="editRole" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-primary"><i class="fa fa-pencil"></i> 编辑</a>&nbsp;&nbsp;<a id="delRole" href="javascript:;" data-id="' + row.id + '" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 删除</a>';
                    }
                }
            ]
        });

        role_validator = $("#role-form").validate({
            errorElement: 'div',
            errorClass: 'help-block',
            focusInvalid: false,
            ignore: "",
            rules: {
                role: {
                    required: true,
                    rangelength: [2, 10],
                    remote: {
                        url: 'management/isRoleExist',
                        type: 'get',
                        data: {
                            role: function () {
                                return $("#role").val();
                            }
                        }
                    }
                }
            }, messages: {
                role: {
                    required: "角色名称不能为空",
                    rangelength: "角色名称长度必须在2到10个字符之间",
                    remote: "该角色名已存在，请更换角色名"
                }
            }, highlight: function (e) {
                $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
            }, success: function (e) {
                $(e).closest('.form-group').removeClass('has-error');
                $(e).remove();
            }, errorPlacement: function (error, element) {
                if (element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                    var controls = element.closest('div[class*="col-"]');
                    if (controls.find(':checkbox,:radio').length > 1) controls.append(error);
                    else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                } else {
                    error.insertAfter(element.parent());
                }
            }
        });

        $("#addRole").click(function () {
            $("#role-form #role").rules("add", {
                required: true,
                rangelength: [2, 10],
                remote: {
                    url: 'management/isRoleExist',
                    type: 'get',
                    data: {
                        role: function () {
                            return $("#roleName").val();
                        }
                    }, messages: {
                        required: "角色名称不能为空",
                        rangelength: "角色名称长度必须在2到10个字符之间",
                        remote: "该角色名已存在，请更换角色名"
                    }
                }
            });
        });

        //模态框隐藏事件
        $("#role-modal").on("hide.bs.modal", function () {
            $("#role-form")[0].reset();
            role_validator.resetForm();
            $("#role-form .form-group").removeClass("has-error");
        });

        $("#saveRole").click(function () {
            if ($("#role-form").valid()) {
                $.post("management/saveRole", $("#role-form").serialize(), function () {
                    $("#role-modal").modal("hide");
                    role_table.ajax.reload();
                });
            }
        });

        //点击编辑按钮，填充数据
        $("#role-table tbody").on("click", "#editRole", function () {
            $("#role-form #role").rules("remove");
            var row = role_table.row($(this).parents("tr")).data();
            $("#role-form #id").val(row.id);
            $("#role-form #roleName").val(row.roleName);
            $.each(row.permissionId.split(","), function (i, n) {
                $("#role-form input:checkbox[value='" + n + "']").prop("checked", true);
            });
            $("#role-modal").modal("show");
        });

        $("#role-table tbody").on("click", "#delRole", function () {
            var roleId = $(this).data("id");
            bootbox.confirm("确定要删除这个角色？", function (r) {
                if (r) {
                    $.get("management/removeRole/" + roleId, function (data) {
                        if (!data) {
                            bootbox.alert("该角色下存在未删除的管理员，不能直接删除！");
                        }
                        $("#role-modal").modal("hide");
                        role_table.ajax.reload();
                    });
                }
            });
        });
    });
</script>